<div class="card bg-light top-padded">
  <div class="card-body">
    <p class="text-muted">
      Tips: Surround key word to search a whole string or string contains punctuation like "-" "."
    </p>

    <div class="input-group">
      <input id="search-box" type="text" class="form-control" aria-label="Search" [(ngModel)]="searchQuery"
             (keyup.enter)="search()" [maxlength]="characterLimit">
      <button id="search-button" class="btn btn-primary input-group-text" (click)="search()">Search</button>
    </div>
    <span>{{ characterLimit - searchQuery.length }} characters left</span>
  </div>
</div>

<div class="card bg-light top-padded" *ngIf="instructors.length">
  <div class="card-header bg-info">
    <strong>Instructors Found</strong>
    <div class="card-header-btn-toolbar">
      <button id="show-instructor-links" class="btn btn-light btn-sm" style="margin-right: 10px;" type="button" (click)="showAllInstructorsLinks()">Expand All</button>
      <button id="hide-instructor-links" class="btn btn-light btn-sm" type="button" (click)="hideAllInstructorsLinks()">Collapse All</button>
    </div>
  </div>

  <div class="table-responsive">
    <table id="search-table-instructor" class="table table-striped data-table">
      <thead>
        <tr>
          <th>Course</th>
          <th>Name</th>
          <th>Google ID</th>
          <th>Institute</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let instructor of instructors; let i = index">
          <tr (click)="instructor.showLinks = !instructor.showLinks">
            <td class="text-break">
              <span class="ngb-tooltip-class" [ngClass]="{'text-course-deleted': instructor.isCourseDeleted}" [ngbTooltip]="instructor.courseName" [innerHtml]="instructor.courseId | highlighter:searchString:true"></span>
              <i *ngIf="instructor.isCourseDeleted" class="fas fa-trash-alt text-course-deleted margin-left-5px bin-icon" [ngbTooltip]="'This course is in the recycle bin.'"></i>
              <br>
              <div class="col-sm-1">
                <button *ngIf="!instructor.showLinks" class="btn" aria-label="Expand">
                  <i class="fas fa-chevron-circle-down" style="color: blue;"></i>
                </button>
                <button *ngIf="instructor.showLinks" class="btn" aria-label="Collapse">
                  <i class="fas fa-chevron-circle-up" style="color: blue;"></i>
                </button>
              </div>
            </td>
            <td [innerHtml]="instructor.name | highlighter:searchString:true"></td>
            <td><a href="{{ instructor.homePageLink }}" (click)="$event.stopPropagation()" target="_blank" rel="noopener noreferrer" [innerHtml]="instructor.googleId | highlighter:searchString:true">
              </a>
            </td>
            <td [innerHtml]="instructor.institute | highlighter:searchString:true"></td>
            <td>
              <a href="{{ instructor.manageAccountLink }}" *ngIf="instructor.manageAccountLink"
                 (click)="$event.stopPropagation()" target="_blank" rel="noopener noreferrer">
                <i class="fas fa-info-circle"></i> Manage this account
              </a>
              <br>
              <a id="reset-instructor-id-{{i}}" href="javascript:;" (click)="resetInstructorGoogleId(instructor, $event)" *ngIf="instructor.googleId">
                <i class="fas fa-sync"></i> Reset Google ID
              </a>
              <br>
              <button id="regenerate-instructor-key-{{i}}" class="btn btn-danger" [disabled]="isRegeneratingInstructorKeys[i]" (click)="instructor.showLinks = !instructor.showLinks; regenerateInstructorKey(instructor, i);"><tm-ajax-loading *ngIf="isRegeneratingInstructorKeys[i]"></tm-ajax-loading>Regenerate key</button>
            </td>
          </tr>
          <tr *ngIf="instructor.showLinks">
            <td colspan="5">
              <ul class="list-group">
                <li class="list-group-item list-group-item-success has-success">
                  <strong>Email</strong>
                  <input [value]="instructor.email" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-info">
                  <strong>Course Join Link</strong>
                  <input [value]="instructor.courseJoinLink" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-light" *ngFor="let awaitingFs of instructor.awaitingSessions | keyvalue">
                  <strong>{{ awaitingFs.key + ' ' + awaitingFs.value.startTime + ' - ' + awaitingFs.value.endTime }}</strong>
                  <input [value]="awaitingFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-warning" *ngFor="let openFs of instructor.openSessions | keyvalue">
                  <strong>{{ openFs.key + ' ' + openFs.value.startTime + ' - ' + openFs.value.endTime }}</strong>
                  <input [value]="openFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-danger" *ngFor="let notOpenFs of instructor.notOpenSessions | keyvalue">
                  <strong>{{ notOpenFs.key + ' ' + notOpenFs.value.startTime + ' - ' + notOpenFs.value.endTime }}</strong>
                  <input [value]="notOpenFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-success" *ngFor="let publishedFs of instructor.publishedSessions | keyvalue">
                  <strong>{{ publishedFs.key + ' ' + publishedFs.value.startTime + ' - ' + publishedFs.value.endTime }}</strong>
                  <input [value]="publishedFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
              </ul>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</div>

<div class="card bg-light top-padded" *ngIf="students.length">
  <div class="card-header bg-primary text-white">
    <strong>Students Found</strong>
    <div class="card-header-btn-toolbar">
      <button id="show-student-links" class="btn btn-light btn-sm" style="margin-right: 10px;" type="button" (click)="showAllStudentsLinks()">Expand All</button>
      <button id="hide-student-links" class="btn btn-light btn-sm" type="button" (click)="hideAllStudentsLinks()">Collapse All</button>
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-striped data-table" id="search-table-student">
      <thead>
        <tr>
          <th>Course [Section] (Team)</th>
          <th>Name</th>
          <th>Google ID</th>
          <th>Institute</th>
          <th>Comments</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let student of students; let i = index">
          <tr (click)="student.showLinks = !student.showLinks">
            <td>
              <span class="text-break ngb-tooltip-class" [ngClass]="{'text-course-deleted': student.isCourseDeleted}" [ngbTooltip]="student.courseName"
              [innerHtml]="student.courseId + ' [' + student.section + '] (' + student.team + ')' | highlighter:searchString:true"></span>
              <i *ngIf="student.isCourseDeleted" class="fas fa-trash-alt text-course-deleted margin-left-5px bin-icon" [ngbTooltip]="'This course is in the recycle bin.'"></i>
              <br>
              <div class="col-sm-1">
                <button *ngIf="!student.showLinks" class="btn" aria-label="Expand">
                  <i class="fas fa-chevron-circle-down" style="color: blue;"></i>
                </button>
                <button *ngIf="student.showLinks" class="btn" aria-label="Collapse">
                  <i class="fas fa-chevron-circle-up" style="color: blue;"></i>
                </button>
              </div>
            </td>
            <td><a href="{{ student.profilePageLink }}"
                   (click)="$event.stopPropagation()" target="_blank" rel="noopener noreferrer" [innerHtml]="student.name | highlighter:searchString:true">
              </a></td>
            <td><a href="{{ student.homePageLink }}" *ngIf="student.googleId"
                   (click)="$event.stopPropagation()" target="_blank" rel="noopener noreferrer" [innerHtml]="student.googleId | highlighter:searchString:true">
              </a></td>
            <td [innerHtml]="student.institute | highlighter:searchString:true"></td>
            <td [innerHtml]="student.comments | highlighter:searchString:true"></td>
            <td>
              <a href="{{ student.manageAccountLink }}" *ngIf="student.googleId && student.manageAccountLink"
                 (click)="$event.stopPropagation()" target="_blank" rel="noopener noreferrer">
                <i class="fas fa-info-circle"></i> Manage this account
              </a>
              <br>
              <a id="reset-student-id-{{i}}" href="javascript:;" (click)="resetStudentGoogleId(student, $event)" *ngIf="student.googleId">
                <i class="fas fa-sync"></i> Reset Google ID
              </a>
              <br>
              <button id="regenerate-student-key-{{i}}" class="btn btn-danger" [disabled]="isRegeneratingStudentKeys[i]" (click)="student.showLinks = !student.showLinks; regenerateStudentKey(student, i);"><tm-ajax-loading *ngIf="isRegeneratingStudentKeys[i]"></tm-ajax-loading>Regenerate key</button>
            </td>
          </tr>
          <tr>
            <td colspan="6">
              <ul class="list-group" *ngIf="student.showLinks" @collapseAnim>
                <li class="list-group-item list-group-item-success has-success">
                  <strong>Email</strong>
                  <input [value]="student.email" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-info">
                  <strong>Course Join Link</strong>
                  <button id="send-course-join-button" type="button" class="btn btn-primary margin-left-5px btn-sm" (click)="openCourseJoinEmail(student.courseId, student.email)">Send mail</button>
                  <input [value]="student.courseJoinLink" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-light" *ngFor="let awaitingFs of student.awaitingSessions | keyvalue">
                  <strong>{{ awaitingFs.key + ' ' + awaitingFs.value.startTime + ' - ' + awaitingFs.value.endTime }}</strong>
                  <button id="send-awaiting-session-reminder-button" type="button" class="btn btn-primary margin-left-5px btn-sm" (click)="openFeedbackSessionReminderEmail(student.courseId, student.email, awaitingFs.key)">Send mail</button>
                  <input [value]="awaitingFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-warning" *ngFor="let openFs of student.openSessions | keyvalue">
                  <strong>{{ openFs.key + ' ' + openFs.value.startTime + ' - ' + openFs.value.endTime }}</strong>
                  <button id="send-open-session-reminder-button" type="button" class="btn btn-primary margin-left-5px btn-sm" (click)="openFeedbackSessionReminderEmail(student.courseId, student.email, openFs.key)">Send mail</button>
                  <input [value]="openFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-danger" *ngFor="let notOpenFs of student.notOpenSessions | keyvalue">
                  <strong>{{ notOpenFs.key + ' ' + notOpenFs.value.startTime + ' - ' + notOpenFs.value.endTime }}</strong>
                  <button id="send-not-open-session-reminder-button" type="button" class="btn btn-primary margin-left-5px btn-sm" (click)="openFeedbackSessionReminderEmail(student.courseId, student.email, notOpenFs.key)">Send mail</button>
                  <input [value]="notOpenFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
                <li class="list-group-item list-group-item-success" *ngFor="let publishedFs of student.publishedSessions | keyvalue">
                  <strong>{{ publishedFs.key + ' ' + publishedFs.value.startTime + ' - ' + publishedFs.value.endTime }}</strong>
                  <button id="send-published-session-reminder-button" type="button" class="btn btn-primary margin-left-5px btn-sm" (click)="openFeedbackSessionReminderEmail(student.courseId, student.email, publishedFs.key)">Send mail</button>
                  <input [value]="publishedFs.value.feedbackSessionUrl" disabled class="form-control">
                </li>
              </ul>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</div>

<tm-account-request-table *ngIf="accountRequests.length" [accountRequests]="accountRequests" [searchString]="searchString"></tm-account-request-table>
